
<template>
   <div>
      {{msg}}
      {{obj1.name}}
      {{obj.name}}
      <ul>
         <li v-for="(item,index) in obj.course"   :key="index">{{item}}</li>
      </ul>
       <button @click="changeName">changeName</button>
      <button @click="changeCourse">changeCourse</button>
   </div>
  
</template>
<script lang = "ts">
import { defineComponent ,reactive ,watch} from 'vue'
export default defineComponent({
  name: 'watch',
  setup() {
      const  obj = reactive({
         name:'啊sir',
         course:['php','java','Python']
      })


      const  obj1 = reactive({
         name:'啊sir',
         course:['php','java','Python']
      })

      function  changeName(){
         obj.name +='改变了'
         obj1.name +='>???'
         console.log(obj.name)
      }

      function changeCourse(){
         obj.course[0] += '改变了'
         console.log(obj.course)
         
      }

      // 多个监听的话用数组来表示 
      // 单个的话就是不用数组
      watch( [obj1,obj] ,()=>{
         console.log('obj发生了变化')
      },
     
         { immediate:true,}
      
      )
      return {
         obj1,
         obj,
         changeName,
         changeCourse
    }
  }
})
</script>

